<template>
    <div class="toolbar-window-operation">
        <div class="item" @click="minClick">
            <q-icon name="remove"/>
        </div>
        <div class="item" @click="maxClick">
            <q-icon :name="isMax?'filter_none':'crop_din'"/>
        </div>
        <div class="item" @click="exitClick">
            <q-icon name="close"/>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
  import { ipcRenderer as render } from "electron";

  /**
   * @author 白雨浓
   * @date 2019/1/9 18:56
   *
   * Toolbar 窗口操作
   **/
  export default {
    name: 'ToolbarWindowOperation',
    data() {
      return {
        isMax: false,
      }
    },
    mounted() {
      render.on('maximize', (evt, type) => this.isMax = type);
      this.$nextTick(() => {

      })
    },
    methods: {
      minClick() {
        render.send('window-min');
      },
      maxClick() {
        render.send('window-max');
      },
      exitClick() {
        render.send('window-close');
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    th = 30px
    .toolbar-window-operation {
        height th
        line-height th
        font-size .9em
        -webkit-app-region no-drag
    }

    .item {
        display inline-block
        height th
        line-height th
        padding 0 10px
        cursor pointer
        -webkit-app-region no-drag
        transition background-color .3s

        i {
            line-height th
            font-size 1.2em
        }

        &:hover {
            background-color rgba(255, 255, 255, .1)
        }

        &:hover:last-child {
            background-color rgba(244, 65, 51, .8)
        }

        &:focus {
            background-color rgba(255, 255, 255, .1)
        }
    }
</style>
